<template>
	<div>
	<div class="header">
		<van-cell size="large">
			<div slot="icon" class="iconko">
				<van-icon name="arrow-left" @click="myzj"/>
			</div>
			<div slot="title" class="cellbox" >个人信息修改</div>
		</van-cell>
		<div>
			<van-cell-group>
			  <van-field
			    error
			    required
			    label="头像"
				center
			  >
			 <template #button >
			     <van-uploader v-model="fileList" multiple />
			 </template>
			  </van-field>
			  <van-field
			    v-model="phone"
			    required
			    label="用户名"
			    placeholder="请输入用户名"
			  />
			  <van-field
			    v-model="phone"
			    required
			    label="邮箱"
			    placeholder="请输入新的邮箱"
			  />
		
			</van-cell-group>
			
		</div>
	</div>
	<div class="tjBtn"><van-button type="primary" block round color="#343434">确认修改</van-button></div>
	</div>
</template>

<script>
	import { Cell, CellGroup } from 'vant';
	import { Field } from 'vant';
	import {Icon} from 'vant';
	import {Button} from 'vant';
	import { Uploader } from 'vant';
	export default{
		data(){
			return{
				phone:'',
				  fileList: [
				        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
				        // Uploader 根据文件后缀来判断是否为图片文件
				        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
				        // { url: 'https://cloud-image', isImage: true },
				      ],
			}
		},
		methods:{
			myzj(){
				this.$router.go(-1)
			}
		},
		components:{
			  [Cell.name]:Cell,
			  [CellGroup.name]:CellGroup,
			  [Icon.name]:Icon,
			  [Field.name]:Field,
			  [Button.name]:Button,
			  [Uploader.name]:Uploader
		}
	}
</script>

<style lang="less" scoped>
	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		.cellbox {
			font-size: 16px;
			text-align: center;
		}
		.iconko {
			font-size: 20px;
		
		}
	
	}
	.tjBtn{
		width: 70vw;margin: 0 auto;margin-top: 40px;
	}
     
</style>
